<template>
  <view>

    <view style="position: fixed;left: 0;width: 100%; top:0;z-index: 999;">
      <view class="" style="background-color: #71c867;">
        <bar></bar>
        <view class="gui-flex gui-nowrap gui-rows gui-align-items-center">

          <view class=" gui-padding" style="padding-top: 10rpx;">
            <text class="gui-h4 gui-bold gui-color-white">发布中心</text>
          </view>

          <gui-mp-navigation-spacing></gui-mp-navigation-spacing>
        </view>
      </view>

    </view>







    <!-- <view class="gui-padding gui-fixed-lb" style="padding-bottom: 0; width: 100%;">
			<view class="gui-bg-green gui-padding gui-color-white gui-text-center gui-border-radius" @click="orderPush">
				<view class="gui-icons">
					&#xe69e; 发布
				</view>
			</view>
		</view> -->
    <!-- 页面主体 -->
    <view :style="{paddingTop: safeTop + 'px'}">
      <form @submit="submit">
        <view class="gui-margin-top gui-padding-x">
          <text class="gui-h6 gui-secondary-text">联系信息</text>
        </view>
        <view style="height:28rpx;"></view>
        <view class="gui-bg-white gui-dark-bg-level-3 gui-padding-x">
          <view class="gui-form-item gui-border-b">
            <text class="gui-form-label gui-secondary-text">联系人名称</text>
            <view class="gui-form-body">
              <input type="text" class="gui-form-input" v-model="formData.contact" placeholder="联系人名称" />
            </view>
          </view>
        </view>
        <view class="gui-bg-white gui-dark-bg-level-3 gui-padding-x">
          <view class="gui-form-item gui-border-b">
            <text class="gui-form-label gui-secondary-text">联系电话</text>
            <view class="gui-form-body">
              <input type="text" class="gui-form-input" v-model="formData.phone" placeholder="请输入联系电话" />
            </view>
          </view>
        </view>
        <view class="gui-bg-white gui-dark-bg-level-3 gui-padding-x">
          <view class="gui-form-item gui-border-b">
            <text class="gui-form-label gui-secondary-text">所在城市</text>
            <view class="gui-form-body">
              <input type="text" class="gui-form-input" v-model="formData.city" @click="selectCity"
                placeholder="请选择城市" />
            </view>
          </view>
        </view>
        <view class="gui-bg-white gui-dark-bg-level-3 gui-padding-x">
          <view class="gui-form-item gui-border-b">
            <text class="gui-form-label gui-secondary-text">联系地址</text>
            <view class="gui-form-body">
              <input type="text" class="gui-form-input" v-model="formData.address" placeholder="请输入联系地址" />
            </view>
          </view>
        </view>



        <view class="gui-bg-white gui-dark-bg-level-3 gui-padding-x">
          <view class="gui-form-item gui-border-b">
            <text class="gui-form-label gui-secondary-text">宴席名称</text>
            <view class="gui-form-body">
              <input v-if="categorySelect !== undefined" type="text" class="gui-form-input" v-model="categorySelect"
                placeholder="请选择宴席名称" @click="selectCategory" />
              <input v-else type="text" class="gui-form-input" v-model="categorySelect" placeholder="请选择宴席名称" />
            </view>
          </view>
        </view>

        <view class="gui-bg-white gui-dark-bg-level-3 gui-padding-x">
          <view class="gui-form-item gui-border-b">
            <text class="gui-form-label gui-secondary-text">宴席地点</text>
            <view class="gui-form-body">
              <picker style="position: relative;" @change="fwdxChange" :value="index" :range="fwdx_list">
                <view class="gui-form-input">{{formData.shopType}}</view>
                <text v-if="!formData.shopType" class="my-placeholder">请选择宴席地点</text>
              </picker>
            </view>
          </view>
        </view>

        <view class="gui-margin-top gui-padding-x">
          <text class="gui-h6 gui-secondary-text">宴会信息</text>
        </view>
        <view style="height:28rpx;"></view>
        <view class="gui-bg-white gui-dark-bg-level-3 gui-padding-x">
          <view class="gui-form-item gui-border-b">
            <text class="gui-form-label gui-secondary-text">时间</text>
            <view class="gui-form-body">
              <gui-datetime @confirm="getDate" :value="formData.orderTime" :isTime="false">
                <input type="text" class="gui-form-input" v-model="formData.orderTime" />
              </gui-datetime>
            </view>
          </view>
        </view>

        <view class="gui-bg-white gui-dark-bg-level-3 gui-padding-x">
          <view class="gui-form-item gui-border-b">
            <text class="gui-form-label gui-secondary-text">宴席预算</text>
            <view class="gui-form-body">
              <picker v-if="showPicker" style="position: relative;" @change="amountChange" :value="index"
                :range="amountScope">
                <view class="gui-form-input">{{formData.amount}}</view>
                <text v-if="!formData.amount" class="my-placeholder">请选择宴席预算</text>
              </picker>
              <input v-else type="text" class="gui-form-input" v-model="formData.amount" placeholder="请自定义宴席预算" />
            </view>
          </view>
        </view>
        <view class="gui-bg-white gui-dark-bg-level-3 gui-padding-x">

          <view style="padding:15rpx 0;">
            <textarea v-model="formData.remark" placeholder="是否是清真及其它要需求..."
              class="gui-textarea gui-bg-gray gui-dark-bg-level-1 gui-padding" style="width:690rpx;"></textarea>
          </view>

        </view>
        <view class="gui-margin-top gui-flex gui-row gui-nowrap gui-justify-content-end gui-padding-x">
          <button type="default" class="gui-button gui-bg-orange gui-noborder" style="width:100%;" formType="submit">
            <text class="gui-icons gui-color-white gui-button-text">发布需求</text>
          </button>
        </view>
        <view style="height:60rpx;"></view>
      </form>
    </view>
  </view>
</template>

<script>
  export default {

    data() {
      return {
        // 屏幕安全高度
        safeTop: uni.getSystemInfoSync().safeAreaInsets.top,
        // 表单数据存储
        formData: {
          shopType: '',
        },

        shopIndex: 0,
        shops: [
          "请选择店铺"
        ],
        shopList: [],
        square: [
          "请选择专场", "普通场", "清仓专场", "预售专场"
        ],
        squareIndex: 0,
        categorySelect: '',
        avater: '',
        video: '',
        xq1: '',
        xq2: '',
        fwdx_list: ['自家', '酒店'],
        index: 0,
        showPicker: true,
        // amountScope: ['3万一下', '3-5万', '5-8万', '8-12万', '12-18万', '18-30万', '30-100万', '100万以上', '自定义价格'],
        amountScope: [],
      }
    },
    async onLoad(e) {
      // console.log(4564556);
      // 获取预算价格区间
      const res = await uni.gRequest.get('dict/data/type?dictType=banquet_budget')
      const linshiData = res.data.map(item => item.dictLabel)
      // console.log(linshiData);
      this.amountScope.push(...linshiData, '自定义价格')
      // console.log('safeTop', this.safeTop);
      var user = uni.gRequest.checkLogin();
      // console.log("user:", user)
      if (user) {
        this.formData.userId = user.userId;
      }

      let today = new Date();
      let year = today.getFullYear();
      let month = today.getMonth() + 1; // 月份从0开始计算，需要加1
      let day = today.getDate();
      this.formData.orderTime = year + '-' + month + '-' + day;

      console.log('orderTime', this.formData.orderTime);

    },
    async onShow() {
      var selectCity = uni.getStorageSync("selectCity");
      if (selectCity) {
        this.formData.city = selectCity;
        uni.removeStorageSync("selectCity")
      }

      var selectCategory = uni.getStorageSync("selectCategory");
      if (selectCategory) {
        this.formData.orderType = selectCategory.id;
        this.categorySelect = selectCategory.categoryName;
        uni.removeStorageSync("selectCategory")
      }



    },
    methods: {
      getDate(res) {
        this.formData.orderTime = res[0] + '-' + res[1] + '-' + res[2];
      },
      fwdxChange(e) {
        this.formData.shopType = this.fwdx_list[e.detail.value]
      },

      // 表单提交
      submit: function(e) {

        if (!this.formData.contact) {
          uni.showToast({
            title: "请填写联系人名称",
            icon: 'none'
          });
          return;
        }
        if (!this.formData.phone) {
          uni.showToast({
            title: "请填写联系电话",
            icon: 'none'
          });
          return;
        }
        if (!this.formData.city) {
          uni.showToast({
            title: "请选择城市",
            icon: 'none'
          });
          return;
        }
        if (!this.formData.address) {
          uni.showToast({
            title: "请填写联系地址",
            icon: 'none'
          });
          return;
        }
        if (!this.formData.orderType) {
          uni.showToast({
            title: "请选择分类",
            icon: 'none'
          });
          return;
        }
        if (!this.formData.shopType) {
          uni.showToast({
            title: "请选择服务类型",
            icon: 'none'
          });
          return;
        }

        if (!this.formData.amount) {
          uni.showToast({
            title: "宴会预算",
            icon: 'none'
          });
          return;
        }

        if (!this.formData.userId) {
          uni.showToast({
            title: "请先登录",
            icon: 'none'
          });
          return;
        }

        const cityAllLocation = JSON.parse(uni.getStorageSync('cityAllLocation') || '{}')
        const isGetLocation = JSON.stringify(cityAllLocation).length > 2
        if (!isGetLocation) {
          uni.showToast({
            title: "请先获取定位",
            icon: 'none'
          });
          return;
        }
        const shortData = {
          ...this.formData,
          latitudes: cityAllLocation.latitude,
          longitudes: cityAllLocation.longitude
        }
        // console.log("shortData", shortData);
        uni.gRequest.post("order", JSON.stringify(shortData)).then(x => {

          uni.showToast({
            title: "提交成功、请等待管理员审核"
          });

          // uni.navigateBack();
          uni.switchTab({
            url: "/pages/switchPages/home"
          })
        });
      },
      selectCity() {
        uni.navigateTo({
          url: '/pages/com/selectCity'
        })
      },
      selectCategory() {
        uni.navigateTo({
          url: '/pages/com/selectCaptory'
        })
      },
      amountChange(e) {
        if (e.detail.value == (this.amountScope.length - 1)) {
          this.formData.amount = ''
          return this.showPicker = false
        }
        this.formData.amount = this.amountScope[e.detail.value]
      }
    }

  }
</script>

<style scoped>
  .my-placeholder {
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0rpx;
    font-size: 28rpx;
    color: #808080;
  }

  .gui-idcard-main {
    margin: 25rpx;
  }

  .gui-idcard-desc {
    line-height: 56rpx;
    font-size: 26rpx;
    padding: 20rpx;
    border-radius: 10rpx;
  }

  .gui-idcard-text {
    line-height: 1.8em;
    margin-top: 30rpx;
  }

  .gui-idcard-items {
    padding: 50rpx;
    border-radius: 10rpx;
    margin-top: 15rpx;
  }

  .gui-idcard-items-image {
    width: 380rpx;
  }

  .header {
    padding: 15rpx 30rpx;
    height: 100rpx;
  }

  .gui-order {
    padding: 25rpx;
    margin: 25rpx;
    margin-bottom: 0rpx;
    border-radius: 10rpx;
  }

  .gui-order-number {
    line-height: 50rpx;
    font-size: 26rpx;
    width: 300rpx;
    flex: 1;
  }

  .gui-shop {
    line-height: 88rpx;
    font-size: 28rpx;
    font-weight: bold;
  }

  .gui-order-goods {
    flex-direction: row;
    flex-wrap: nowrap;
    padding-bottom: 20rpx;
    align-items: flex-start;
  }

  .gui-order-goods-img {
    width: 100rpx;
    height: 100rpx;
  }

  .gui-order-goods-name {
    line-height: 40rpx;
    width: 200rpx;
    flex: 1;
    overflow: hidden;
    font-size: 26rpx;

  }

  .gui-order-goods-price {
    font-size: 24rpx;
    line-height: 50rpx;
    width: 150rpx;
    text-align: right;
  }

  .gui-order-footer {
    margin-top: 2px;
  }

  .gui-order-status {
    line-height: 50rpx;
    font-size: 26rpx;
    width: 100rpx;
    text-align: center;
  }

  .gui-order-btn {
    width: 150rpx;
    height: 50rpx;
    line-height: 50rpx;
    font-size: 22rpx;
    text-align: center;
    border-radius: 60rpx;
    margin-left: 20rpx;
  }

  .gui-order-btn-red {
    border-color: #FF0036;
    color: #FF0036;
  }

  .gui-empty-icon {
    font-size: 130rpx;
    line-height: 130rpx;
    margin-top: 200rpx;
  }
</style>
